<template>
	<div class="ele-body">
		<a-card :bordered="false">
			<!-- 搜索表单 -->
			<StrategySearch @search="reload" />
			<!-- 表格 -->
			<ele-pro-table ref="tableRef" row-key="id" :columns="(columns as any)" :datasource="datasource"
				v-model:selection="selection" :toolkit="null" :scroll="{ x: 800 }">
				<template #bodyCell="{ column, record }">
					<template v-if="column.key === 'image'">
						<img :src="record.image" :width="200" />
					</template>
					<template v-if="column.key === 'status'">
						<span>
						  <a-tag v-if="record.status === 0"  color="geekblue">未审核</a-tag>
						  <a-tag v-if="record.status === 1"  color="green">审核通过</a-tag>
						  <a-tag v-if="record.status === 2"  color="volcano">审核不通过</a-tag>
						</span>
					</template>
					<template v-if="column.key === 'action'">
						<a-space>
							<a @click="openEdit(record)">查看</a>
							<a-divider type="vertical" />
							<a @click="shenhe(record)">审核</a>
						</a-space>
					</template>
				</template>
			</ele-pro-table>
		</a-card>
	</div>
	<!-- 编辑弹窗 -->
	<StrategyEdit v-model:visible="showEdit" :data="current" @done="reload" />
	<StrategyShenhe v-model:visible="showEdit1" :data="current" @done="reload" />
</template>

<script lang="ts" setup>
	import { ref, computed } from 'vue';
	import { message } from 'ant-design-vue';
	import type { EleProTable } from 'ele-admin-pro';
	import type {
		DatasourceFunction,
		ColumnItem
	} from 'ele-admin-pro/es/ele-pro-table';
	import { toDateString } from 'ele-admin-pro';
	import StrategySearch from './components/strategy-search.vue';
	import StrategyEdit from './components/strategy-edit.vue';
	import StrategyShenhe from './components/strategy-shenhe.vue';
	import { pageStrategys, removeStrategy } from '@/api/neirong/strategy';
	import type { Strategy, StrategyParam } from '@/api/neirong/strategy/model';

	// 表格实例
	const tableRef = ref<InstanceType<typeof EleProTable>>();

	// 表格列配置
	const columns = ref<ColumnItem[]>([
		{
			key: 'index',
			width: 48,
			align: 'center',
			fixed: 'left',
			hideInSetting: true,
			customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
		},
		{
			title: '缩略图',
			key: 'image',
			dataIndex: 'image',
			sorter: true,
			showSorterTooltip: false,
			ellipsis: true
		},
		{
			title: '攻略名称',
			dataIndex: 'name',
			sorter: true
		},
		{
			title: '攻略简介',
			dataIndex: 'description',
			sorter: true,
			width: 500
		},
		{
			title: '旅行时间',
			dataIndex: 'departTime',
			sorter: true
		},
		{
			title: '旅行天数',
			dataIndex: 'days',
			sorter: true
		},
		{
			title: '发布人',
			dataIndex: 'createUser',
			sorter: true
		},
		{
			title: '发布时间',
			dataIndex: 'createTime',
			sorter: true,
			ellipsis: true,
			customRender: ({ text }) => toDateString(text)
		},
		{
		  title: '状态',
		  dataIndex: 'status',
		  key: 'status',
		  sorter: true
		},
		{
			title: '操作',
			key: 'action',
			width: 200,
			align: 'center',
			hideInSetting: true
		}
	]);

	// 表格选中数据
	const selection = ref<Strategy[]>([]);

	// 当前编辑数据
	const current = ref<Strategy>();

	// 是否显示编辑弹窗
	const showEdit = ref(false);
	const showEdit1 = ref(false);

	// 表格数据源
	const datasource : DatasourceFunction = ({ page, limit, where, orders }) => {
		return pageStrategys({ ...where, ...orders, page, limit });
	};

	/* 搜索 */
	const reload = (where ?: StrategyParam) => {
		selection.value = [];
		tableRef?.value?.reload({ page: 1, where: where });
	};

	/* 打开编辑弹窗 */
	const openEdit = (row ?: Strategy) => {
		current.value = row;
		showEdit.value = true;
	};

	/* 打开编辑弹窗 */
	const shenhe = (row ?: Strategy) => {
		current.value = row;
		showEdit1.value = true;
	};


	/* 删除单个 */
	const remove = (row : Strategy) => {
		const hide = message.loading('请求中..', 0);
		removeStrategy(row.id)
			.then((msg) => {
				hide();
				message.success(msg);
				reload();
			})
			.catch((e) => {
				hide();
				message.error(e.message);
			});
	};
</script>

<script lang="ts">
	import { defineComponent } from 'vue';

	export default defineComponent({
		name: 'Strategy'
	});
</script>